<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
    <script src="/layuiadmin/layui/layui.js"></script>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card-body">
        <div class="layui-row">
            <div class="layui-col-md4 layui-col-lg-offset4">
                <form class="layui-form">
                    <div class="layui-form-item">
                        <label for="" class="layui-form-label">WSS</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" value="testcall.shupian.cn:7443" id="wss">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="" class="layui-form-label">uri</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" value="192.168.254.216:2088" id="uri">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="" class="layui-form-label">外呼号</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" value="" id="username">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="" class="layui-form-label">密码</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" value="" id="password">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="" class="layui-form-label">呼叫</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" value="" id="callee">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="" class="layui-form-label">音/视频</label>
                        <div class="layui-input-block">
                            <video autoplay style="height: 100px" id="myVideo"></video>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="" class="layui-form-label"></label>
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn layui-btn-sm" id="regBtn">注册</button>
                            <button type="button" class="layui-btn layui-btn-sm" id="unRegBtn">注销</button>
                            <button type="button" class="layui-btn layui-btn-sm layui-btn-danger" id="hupBtn">挂断
                            </button>
                            <button type="button" class="layui-btn layui-btn-sm" id="callBtn">呼叫</button>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="" class="layui-form-label">注册状态</label>
                        <div class="layui-input-block">
                            <div class="layui-word-aux layui-form-mid">
                                <span class="layui-badge layui-bg-green" id="regStatus">未注册</span>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="" class="layui-form-label">呼叫状态</label>
                        <div class="layui-input-block">
                            <div class="layui-word-aux layui-form-mid">
                                <span class="layui-badge layui-bg-cyan" id="callStatus">空闲</span>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>

    </div>
</div>

<script src="./jssip-3.7.4.min.js"></script>
<script>
    layui.config({
        base: '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index', //主入口模块
    }).use(['element', 'form', 'layer', 'table', 'upload', 'laydate', 'jquery'], function () {
        var $ = layui.jquery;
        var form = layui.form;
        var table = layui.table;

        //检测麦克风和摄像头权限
        function checkUserMedia(){
            return new Promise((reslove, reject) => {
                navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
                if (navigator.getUserMedia) {
                    navigator.getUserMedia(
                        { audio: true } //只启用音频  A
                        , function () {  //stream这个参数是麦克风的输入流，将这个流传递给Recorder
                            layer.msg('麦克风验证成功',{icon:1})
                        }
                        , function (error) {
                            switch (error.code || error.name) {
                                case 'PERMISSION_DENIED':
                                case 'PermissionDeniedError':
                                case 'NotAllowedError':
                                    layer.msg('获取设备被拒绝',{icon:2})
                                    break;
                                case 'NOT_SUPPORTED_ERROR':
                                case 'NotSupportedError':
                                    layer.msg('浏览器不支持硬件设备',{icon:2})
                                    break;
                                case 'MANDATORY_UNSATISFIED_ERROR':
                                case 'MandatoryUnsatisfiedError':
                                case 'NotFoundError':
                                case 8:
                                    layer.msg('无法发现指定的硬件设备',{icon:2})
                                    break;
                                default:
                                    layer.msg('无法打开麦克风。异常信息:' + (error.code || error.name),{icon:2})
                                    break;
                            }
                        });
                } else {
                    layer.msg('当前浏览器不支持音频功能',{icon:2})
                }
            });
        }
        checkUserMedia();

        //必需要设置
        JsSIP.C.SESSION_EXPIRES=120;
        JsSIP.C.MIN_SESSION_EXPIRES=120;

        var currentSession = null
        var userAgent
        var conf

        $("#regBtn").click(function () {
            conf = {
                "wss": $("#wss").val(),
                "uri": $("#uri").val(),
                "username": $("#username").val(),
                "password": $("#password").val(),
            }
            var socket = new JsSIP.WebSocketInterface('wss://' + conf.wss);
            var configuration = {
                sockets: [socket],
                uri: 'sip:' + conf.username + '@' + conf.uri,
                password: conf.password
            };
            userAgent = new JsSIP.UA(configuration);

            // websocket
            userAgent.on('connected', function (e) {
                console.log('jssip websocket已连接')
            });
            userAgent.on('disconnected', function (e) {
                console.log('jssip websocket已断开')
            });

            // 来电监听
            userAgent.on('newRTCSession', function (data) {
                // 服务器呼叫该分机
                if (data.originator === 'remote') {
                    layer.msg('有新的来电，系统为您自动接听')
                    data.session.answer({
                        'mediaConstraints': {'audio': true, 'video': true}
                    })
                }
                currentSession = data.session
                //Fired when the call is accepted (2XX received/sent).
                currentSession.on('accepted', function () {
                    console.log('已接听')
                    $("#callStatus").text('通话中')
                })
                //Fired when the call is confirmed (ACK received/sent).
                currentSession.on('confirmed', function () {
                    console.log('ACK确认')
                    const stream = new MediaStream();
                    const receivers = currentSession.connection.getReceivers();
                    if (receivers) {
                        receivers.forEach(function (receiver,index) {
                            stream.addTrack(receiver.track)
                        })
                    }

                    document.getElementById("myVideo").srcObject = stream;
                })
                //Fired when an established call ends.
                currentSession.on('ended', function () {
                    console.log('呼叫结束')
                    $("#callStatus").text('结束')
                    currentSession = null
                })
                //Fired when the session was unable to establish.
                currentSession.on('failed', function () {
                    console.log('通话失败')
                    $("#callStatus").text('通话失败')
                    currentSession = null
                })

            });

            // 注册信息
            userAgent.on('registered', function (e) {
                $("#regStatus").text('已注册')
            });
            userAgent.on('unregistered', function (e) {
                $("#regStatus").text('未注册')
            });
            userAgent.on('registrationFailed', function (e) {
                $("#regStatus").text('注册失败')
                console.log(e)
            });
            userAgent.start()
        })

        $("#unRegBtn").click(function () {
            if (userAgent !== undefined) {
                userAgent.unregister({
                    all: true
                })
            }
        })

        $("#hupBtn").click(function () {
            if (currentSession !== null) {
                currentSession.terminate()
            }
        })

        $("#callBtn").click(function () {
            if (userAgent !== undefined && $("#callee").val() !== '') {
                let eventHandlers = {
                    'progress':   function(data){ console.log(data) },
                    'failed':     function(data){ console.log(data) },
                    'confirmed':  function(data){ console.log(data) },
                    'ended':      function(data){ console.log(data) }
                };
                userAgent.call("sip:"+$("#callee").val()+"@"+conf.uri,{
                    'eventHandlers': eventHandlers,
                    'mediaConstraints': {'audio': true, 'video': true}
                })
            }
        })

    });
</script>

</body>
</html>



